import { Link } from "react-router-dom";
import useCartStore from "../../stores/cartStore";

const Profile = () => {
  const { getTotalItems } = useCartStore();
  const cartItemCount = getTotalItems();
  // Mock user data
  const user = {
    name: "张三",
    email: "zhangsan@example.com",
    phone: "138****1234",
    avatar: "avatar",
    joinDate: "2023-05-15",
    points: 1280
  };

  // Mock order data
  const orders = [
    { id: "20231001001", date: "2023-10-01", status: "已发货", total: 2999 },
    { id: "20230915002", date: "2023-09-15", status: "已完成", total: 1899 },
    { id: "20230822003", date: "2023-08-22", status: "已取消", total: 899 },
  ];

  const menuItems = [
    { name: "个人信息", icon: "user" },
    { name: "我的订单", icon: "order" },
    { name: "收货地址", icon: "address" },
    { name: "我的收藏", icon: "favorite" },
    { name: "优惠券", icon: "coupon" },
    { name: "积分中心", icon: "points" },
  ];

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">个人中心</h1>
      
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
        {/* Sidebar */}
        <div className="lg:col-span-1">
          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex flex-col items-center mb-6">
              <div className="bg-gray-200 w-20 h-20 rounded-full flex items-center justify-center mb-4">
                <span className="text-gray-500">头像</span>
              </div>
              <h2 className="text-xl font-semibold">{user.name}</h2>
              <p className="text-gray-600">{user.email}</p>
              <div className="mt-2 px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">
                普通会员
              </div>
            </div>
            
            <nav className="space-y-2">
              {menuItems.map((item, index) => (
                <button
                  key={index}
                  className={`w-full text-left px-4 py-3 rounded-lg flex items-center ${
                    index === 0 
                      ? "bg-blue-50 text-blue-600" 
                      : "text-gray-700 hover:bg-gray-100"
                  }`}
                >
                  <span className="mr-3">
                    {item.icon === "user" && (
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                      </svg>
                    )}
                    {item.icon === "order" && (
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                      </svg>
                    )}
                  </span>
                  {item.name}
                </button>
              ))}
            </nav>
          </div>
        </div>
        
        {/* Main Content */}
        <div className="lg:col-span-3">
          {/* User Info */}
          <div className="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 className="text-2xl font-semibold mb-6">个人信息</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-gray-700 mb-2">姓名</label>
                <p className="bg-gray-100 py-2 px-4 rounded">{user.name}</p>
              </div>
              <div>
                <label className="block text-gray-700 mb-2">邮箱</label>
                <p className="bg-gray-100 py-2 px-4 rounded">{user.email}</p>
              </div>
              <div>
                <label className="block text-gray-700 mb-2">手机号</label>
                <p className="bg-gray-100 py-2 px-4 rounded">{user.phone}</p>
              </div>
              <div>
                <label className="block text-gray-700 mb-2">注册时间</label>
                <p className="bg-gray-100 py-2 px-4 rounded">{user.joinDate}</p>
              </div>
              <div>
                <label className="block text-gray-700 mb-2">会员积分</label>
                <p className="bg-gray-100 py-2 px-4 rounded">
                  <span className="text-blue-600 font-semibold">{user.points}</span> 分
                </p>
              </div>
            </div>
            <div className="mt-6">
              <button className="bg-blue-500 text-white font-semibold py-2 px-6 rounded-lg hover:bg-blue-600 transition duration-300">
                编辑信息
              </button>
            </div>
          </div>
          
          {/* Recent Orders */}
          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-semibold">最近订单</h2>
              <Link to="/user/orders" className="text-blue-500 hover:text-blue-700">
                查看全部订单
              </Link>
            </div>
            
            {orders.length === 0 ? (
              <div className="text-center py-12">
                <p className="text-gray-500">暂无订单</p>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left py-3 px-4">订单号</th>
                      <th className="text-left py-3 px-4">日期</th>
                      <th className="text-left py-3 px-4">状态</th>
                      <th className="text-right py-3 px-4">金额</th>
                      <th className="text-right py-3 px-4">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {orders.map((order) => (
                      <tr key={order.id} className="border-b">
                        <td className="py-3 px-4">#{order.id}</td>
                        <td className="py-3 px-4">{order.date}</td>
                        <td className="py-3 px-4">
                          <span className={`px-2 py-1 rounded text-sm ${
                            order.status === "已完成" 
                              ? "bg-green-100 text-green-800" 
                              : order.status === "已发货" 
                                ? "bg-blue-100 text-blue-800" 
                                : "bg-gray-100 text-gray-800"
                          }`}>
                            {order.status}
                          </span>
                        </td>
                        <td className="py-3 px-4 text-right">¥{order.total}</td>
                        <td className="py-3 px-4 text-right">
                          <button className="text-blue-500 hover:text-blue-700">
                            查看详情
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Profile;